<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>websocket测试页面</title>	
    <meta http-equiv="keywords" content="websocket,例子">
    <meta http-equiv="description" content="测试websocket">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
</head>
<body>
	Welcome<br/>
	<input id="text" type="text" value='014768104238,014791900502,014791900512' style="width: 1000;"/>
    <button onclick="send()">Send</button>
    <button onclick="closeWebSocket()">Close</button>
	<img src=""/>
	<div id="message">
	</div>	
</body>
<script type="text/javascript">
    var websocket = null;

    //判断当前浏览器是否支持WebSocket
    if('WebSocket' in window){
        websocket = new WebSocket("ws://192.168.3.103:3555/WebSocket");
    }else{
        alert('Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function(event){
        setMessageInnerHTML("error");
    };

    //连接成功建立的回调方法
    websocket.onopen = function(event){
        setMessageInnerHTML("open");
    }

    //接收到消息的回调方法
    websocket.onmessage = function(event){
        setMessageInnerHTML(event.data);
		var obj = JSON.parse(event.data);
		if(obj.success)
		{
		  
		  document.getElementsByTagName("img")[0].src = "data:image/png;base64,"+obj.data.PeopleImg;
		 // alert(123);
		  
		}
    }

    //连接关闭的回调方法
    websocket.onclose = function(){ 
        setMessageInnerHTML("close");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function(){
        websocket.close();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML){
        document.getElementById('message').innerHTML += innerHTML + '<br/>******************<br/>';
    }

    //关闭连接
    function closeWebSocket(){
        websocket.close();
    }

    //发送消息
    function send(){
        var message = document.getElementById('text').value;
        websocket.send(message);
    }
</script>
</html>
